<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>$watch监视器的使用</title>
    <link rel="stylesheet" href="./libs/css/bootstrap.css">
</head>
<body ng-app='app'>
    
    <div ng-controller='demoCtrl' class="container well">
        <form class="form-inline">
            <div class="form-group" id="username">
                <label>用户名：</label>
                <input type="text" class="form-control" placeholder="用户名" ng-model="username">
                <span ng-bind="emailMsg"></span>
            </div>
        </form>
    </div>
    
</body>
<script src="./libs/js/angular-1.6.9.min.js"></script> 
<script>
  var  app=angular.module('app',[]);
  app.controller('demoCtrl',['$scope',function($scope){
      $scope.username='';
      $scope.emailMsg='请输入用户名';
      $scope.$watch('username',function(now,old){
        console.log(now,old);  
        if(now=='admin'){
            // console.log('用户名正确');
            $scope.emailMsg='用户名不可用';
            var username= angular.element(document.getElementById('username'));
            username.addClass('has-error')

        }else if($scope.emailMsg!='请输入用户名'){
            $scope.emailMsg='用户名可用';
        }
    });
  }]);
</script>
</html>  